<!DOCTYPE html>
<html>
    
    <head>
        <title>doublelist demo 5</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link type="text/css" rel="stylesheet" href="../style/avalon.doc.css"
        />
        <script src="../../avalon.js"></script>
        <script src="../style/highlight/shCore.js"></script>
        <script>
            avalon.library("aoyou", {
                $ready: function () {
                    avalon.log("控件已经构建完毕")
    
                    // reset data and selected
                    setTimeout(function(){
    
                        avalon.vmodels.ui.data = [
                            {name: "Roy", value: 6},
                            {name: "Kate", value: 7},
                            {name: "Peter", value: 8}
                        ]
    
                        avalon.vmodels.ui.selected = [7,8]
    
                    }, 2000)
                }
            })
    
            require(["./component/doublelist/avalon.doublelist"], function () {
                var demoVM = avalon.define({
                    $id: "demo",
                    $opts: {
                        data: [
                            {name: "Lily", value: 1},
                            {name: "Lucy", value: 2},
                            {name: "Tom", value: 3},
                            {name: "Harry", value: 4},
                            {name: "Jim", value: 5}
                        ]
                    }
                })
    
                avalon.scan()
            })
        </script>
    </head>
    
    <body ms-controller="demo">
        <fieldset>
            <legend>doublelist 异步改变数据</legend>
            <p>异步配置data和selected，重新配置后，右侧自动清空</p>
            <aoyou:doublelist $id="ui" config="$opts"></aoyou:doublelist>
        </fieldset>
        <div ms-skip>
            <pre class="brush:html; gutter: false; toolbar: false">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    
    &lt;head&gt;
        &lt;title&gt;doublelist demo 5&lt;/title&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;meta name="viewport" content="width=device-width"&gt;
        &lt;link type="text/css" rel="stylesheet" href="../style/avalon.doc.css"
        /&gt;
        &lt;script src="../../avalon.js"&gt;&lt;/script&gt;
        &lt;script src="../style/highlight/shCore.js"&gt;&lt;/script&gt;
        &lt;script&gt;
            avalon.library("aoyou", {
                $ready: function () {
                    avalon.log("控件已经构建完毕")
    
                    // reset data and selected
                    setTimeout(function(){
    
                        avalon.vmodels.ui.data = [
                            {name: "Roy", value: 6},
                            {name: "Kate", value: 7},
                            {name: "Peter", value: 8}
                        ]
    
                        avalon.vmodels.ui.selected = [7,8]
    
                    }, 2000)
                }
            })
    
            require(["./component/doublelist/avalon.doublelist"], function () {
                var demoVM = avalon.define({
                    $id: "demo",
                    $opts: {
                        data: [
                            {name: "Lily", value: 1},
                            {name: "Lucy", value: 2},
                            {name: "Tom", value: 3},
                            {name: "Harry", value: 4},
                            {name: "Jim", value: 5}
                        ]
                    }
                })
    
                avalon.scan()
            })
        &lt;/script&gt;
    &lt;/head&gt;
    
    &lt;body ms-controller="demo"&gt;
        &lt;fieldset&gt;
            &lt;legend&gt;doublelist 异步改变数据&lt;/legend&gt;
            &lt;p&gt;异步配置data和selected，重新配置后，右侧自动清空&lt;/p&gt;
            &lt;aoyou:doublelist $id="ui" config="$opts"&gt;&lt;/aoyou:doublelist&gt;
        &lt;/fieldset&gt;
        &lt;div ms-skip&gt;&lt;/div&gt;
    &lt;/body&gt;

&lt;/html&gt;
</pre>
        </div>
    </body>

</html>